 @charset "utf-8";
@import "reset";
@mixin bgg($width,$height){
    width: $width/2;
    height: $height/2;
}
@mixin img(){
    width:100%;
    height: 100%;
}
@function px($px){
    @return ($px/2);
}
$fontsize:20;
@function r($px){
    @return $px/(2*$fontsize) * 1rem;
}
html,body{
            width: 100%;
            height: 100%;
        }
        #web{
            width: 100%;
            height: 100%;
            position: relative;
        }
        header{
            width: 94%;
            height: r(57);
            background: white;
            position: absolute;
            margin-top: r(48);
            top: 0;
            left: 0;
            div{
                vertical-align: middle;
            }
            .logo{
                float: left;
                width: 16.4%;
                 height: r(57);
                 margin-left:r(23);
                 border: 1px solid #ff9344;
                 border-radius: 12px;
                 text-align: center;
                a{
                     display: block;
                    @include img();
                    border-radius: 8px;
                    font-size: r(26);
                    line-height: r(57);
                    color: #000000;
                    border: none;
                    background: transparent;
                }
            }
           p{
               text-align: center;
               font-size: r(26);
               color: #000;
               line-height: r(57);
           }
         .start{
            width: r(51);
            height: r(48);
            float: right;
            img{
                width: 100%;
                height: 100%;
            }
       }
        }    
        section{
            width: r(705);
            position:absolute;
            left: r(25);
            top: r(130);
            bottom: r(136);
            overflow-y: scroll;
            .carous{
                width: r(705);
                height: r(260);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .buy{   
                    width: r(664);
                    margin: 0 auto;
                h3{
                    font-size: r(72);
                    color: #ff9344;
                }
                input{
                    width: r(111);
                    height: r(59);
                    border-radius: r(24);
                    color: white;
                    font-size: r(30);
                    background:#ff9344 ;
                    margin-top: r(24);
                    border: 0;
                     appearance: none;
                    -webkit-appearance:none;
                    -moz-appearance:none;
                }
            }
            article{
                .title{
                    width: r(664);
                    margin:r(20)  auto;
                    p:nth-of-type(1){
                        img{
                            //@include bgg(32px,48px);
                            width: r(38);
                            height: r(36);
                        }
                        span{
                            font-size: r(30);
                            color: #000;
                            line-height: r(54);
                            vertical-align:top;
                            span{
                                color: #ff9344;
                            }
                        }
                    }
                     p:nth-of-type(2){
                        // margin-right: px(21px);
                        a{
                            color: #8e8e8e;
                            font-size: r(26);
                            line-height: r(54);
                        }
                    }
                }
                .belong{
                    width: r(664);
                    height: r(67);
                    margin: 0 auto;
                    background:#ff9344 ;
                    span:nth-of-type(1){
                        font-size: r(30);
                        color: #FFFFFF;
                        line-height: r(67);
                        padding-left: r(12);
                    }
                    span:nth-of-type(2){
                        padding-right: r(12);
                        a{
                            font-size: r(46.72);
                            color: #FFFFFF;
                            line-height: r(67);
                        }
                    }
                }
                .item{
                    width: r(664);
                    margin: r(10) auto 0;
                    .item_img{
                        width: r(176);
                        height: r(176);
                        overflow: hidden;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .item_text{
                        width: r(462);
                        .item_msg{
                            h4{
                                font-size: r(30);
                                color: #000000;
                                margin-top: r(12);
                                padding-left: r(4);
                            }
                            .item_score{
                                .startBox{
                                    margin-top: r(10);
                                    li{
                                        float: left;
                                        width: r(36);
                                        height: r(34);
                                        overflow: hidden;
                                        img{
                                            width: 100%;
                                            height: 100%;
                                            vertical-align: top;
                                        }
                                        &:last-child{
                                            width: r(64);
                                             height: r(34);
                                             margin-left: r(4);
                                            span{
                                                font-size: r(26);
                                                color: #929292;
                                                vertical-align: top;
                                                line-height: r(34);
                                            }
                                        }
                                    }
                                }
                            }
                         p{
                                font-size: r(24);
                                color: #929292;
                                line-height: r(47);
                            }
                          a{
                              font-size: r(20);
                              color: #ff9344;
                          }  
                        }
                        input{
                            width: r(111);
                            height: r(60);
                            background:#ff9344 ;
                            font-size: r(30);
                            color: #FFFFFF;
                            border-radius: r(24);
                            margin-top: r(68);
                            border: 0;
                         appearance: none;
                        -webkit-appearance:none;
                        -moz-appearance:none;
                        }
                    }
                }
             }
        }
        footer{
            width: 100%;
            height:r(136);
            background: white;
            position: absolute;
            bottom: 0;
            left: 0;
            ul li{
                width: 25%;
                height: 100%;
                float: left;
                text-align: center;
                .iconfont{
                    color: transparent;
                    font-size: r(60);
                    -webkit-text-stroke: r(2) #ff9344;
                }
                &.active .iconfont{
                    color: #ff9344;
                }
                &:hover .iconfont{
                    color: #ff9344;
                }
            }
            a{
                color: #000;
                
            }
        }
